<template>
  <div class="grid">
    <div @click="onItemClick(certification)" class="item" v-for="(certification) in  list">
      <img :src="certification.smallPic"/>
      <p class="ellipsis2">{{certification.title}}</p>
    </div>

  </div>
</template>
<script>

  export default {
    name: 'MyCertificationGrid',
    props: {
      list: Array
    },
    methods: {
      onItemClick(certification) {
        let certId = certification.id;
        let userId = this.$store.getters.userid
        this.$router.push(`/cert/${certId}/${userId}`)
      }
    }
  }
</script>
<style scoped>
  .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding-left: 5.3%;
  }

  .grid > .item {
    width: 28.4vw;
    margin-right: 2.1%;
    margin-bottom: 3.1vh;
  }

  .grid :nth-child(3n) {
    margin-right: 0;
  }

  .grid > .item > img {
    width: 100%;
    height: 39.05vw;
    object-fit: fill;
  }

  .grid > .item > p {
    font-size: 12px;
    color: #333333;
    margin-top: 8px;
  }
</style>
